<template>
  <div>
    <div class="app-container">

      <!-- 搜索和新增按钮 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6">
          <el-input
            v-model="queryParams.snId"
            clearable
            placeholder="请输入产品SN码进行查询"
            @clear="getList"
            @keyup.enter.native="getList">
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-input
            v-model="queryParams.sendBackNumber"
            clearable
            placeholder="请输入订单号进行查询"
            @clear="getList"
            @keyup.enter.native="getList">
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-button
            icon="el-icon-search"
            @click="getList">
            查询
          </el-button>
        </el-col>


        <el-col :span="6">
          <el-button
            icon="el-icon-plus"
            plain
            type="primary"
            @click="showAddForm">
            添加
          </el-button>
        </el-col>

      </el-row>


      <!--      信息表主体-->
      <el-table v-loading="loading" :data="tableData">
        <el-table-column align="center" label="订单号" prop="sendBackNumber"/>
        <el-table-column align="center" label="品牌" prop="brand"/>
        <el-table-column align="center" label="机型" prop="machineType"/>
        <el-table-column align="center" label="机器SN码" prop="snId"/>
        <el-table-column align="center" label="整机料号" prop="materialNumber"/>

        <el-table-column align="center" label="机器状态" prop="machineCondition">
          <template slot-scope="scope">
            <span v-if="scope.row.machineCondition === 4">未翻新</span>
            <span v-else-if="scope.row.machineCondition === 5">已翻新</span>
            <span v-else>未知状态</span> <!-- 防止出现意外值 -->
          </template>
        </el-table-column>

        <!-- 添加订单详情按钮 -->
        <el-table-column align="center" label="订单详情">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="text"
              @click="showDetailsDialog(scope.row)">
              详情查询
            </el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              plain
              size="small"
              type="success"
              @click="openUpdateDialog(scope.row)">
              修改
            </el-button>

            <el-button
              plain
              size="small"
              type="warning"
              @click="openFanxinDialog(scope.row)">
              翻新
            </el-button>

            <el-button
              plain
              size="small"
              type="danger"
              @click="openRukuBox(scope.row)">
              入库
            </el-button>
          </template>
        </el-table-column>

      </el-table>


      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>


    <!-- 详情弹窗 -->
    <el-dialog
      :visible.sync="detailsDialogVisible"
      width="500px">
      <span slot="title" class="custom-dialog-title">详细信息</span>

      <el-form ref="detailsForm" :model="detailsForm" label-width="100px">
        <el-form-item label="机器序列号">
          <el-input v-model="detailsForm.snId" disabled></el-input>
        </el-form-item>
        <el-form-item label="整机料号">
          <el-input v-model="detailsForm.materialNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="detailsForm.count" disabled></el-input>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-input v-model="detailsForm.size" disabled></el-input>
        </el-form-item>
        <el-form-item label="附件状况">
          <el-input v-model="detailsForm.attachStatus" disabled></el-input>
        </el-form-item>
        <el-form-item label="配件详情">
          <el-input v-model="detailsForm.partsDetail" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input v-model="detailsForm.manuDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="退回日期">
          <el-input v-model="detailsForm.backDate" disabled></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>


    <!-- 修改信息弹窗 -->
    <el-dialog
      :visible.sync="updateDialogVisible"
      width="500px">
      <span slot="title" class="custom-dialog-title">修改订单信息</span>
      <el-form ref="updateForm" :model="updateForm" :rules="rulesUpdate" label-width="100px">
        <el-form-item label="机器SN码" prop="snId">
          <el-input v-model="updateForm.snId" disabled></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="sendBackNumber">
          <el-input v-model="updateForm.sendBackNumber"></el-input>
        </el-form-item>
        <el-form-item label="整机料号" prop="materialNumber">
          <el-input v-model="updateForm.materialNumber"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="updateForm.brand"></el-input>
        </el-form-item>
        <el-form-item label="机型" prop="machineType">
          <el-input v-model="updateForm.machineType"></el-input>
        </el-form-item>
        <el-form-item label="尺寸" prop="size">
          <el-input v-model="updateForm.size"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model="updateForm.count"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" prop="manuDate">
          <el-date-picker
            v-model="updateForm.manuDate"
            type="date"
            placeholder="选择生产日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="附件状况" prop="attachStatus">
          <el-input v-model="updateForm.attachStatus"></el-input>
        </el-form-item>
        <el-form-item label="配件详情" prop="partsDetail">
          <el-input v-model="updateForm.partsDetail"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpdate">确定</el-button>
      </div>
    </el-dialog>


    <!-- 添加信息弹窗 -->
    <el-dialog
      :visible.sync="addDialogVisible"
      width="500px">
      <span slot="title" class="custom-dialog-title">添加数据信息</span>
      <el-form ref="addForm" :model="addForm" :rules="rulesAdd" label-width="100px">
        <el-form-item label="机器SN码" prop="snId">
          <el-input v-model="addForm.snId"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="sendBackNumber">
          <el-input v-model="addForm.sendBackNumber"></el-input>
        </el-form-item>
        <el-form-item label="整机料号" prop="materialNumber">
          <el-input v-model="addForm.materialNumber"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="addForm.brand"></el-input>
        </el-form-item>
        <el-form-item label="机型" prop="machineType">
          <el-input v-model="addForm.machineType"></el-input>
        </el-form-item>
        <el-form-item label="尺寸" prop="size">
          <el-input v-model="addForm.size"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model="addForm.count"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" prop="manuDate">
          <el-date-picker
            v-model="addForm.manuDate"
            type="date"
            placeholder="选择生产日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="附件状况" prop="attachStatus">
          <el-input v-model="addForm.attachStatus"></el-input>
        </el-form-item>
        <el-form-item label="配件详情" prop="partsDetail">
          <el-input v-model="addForm.partsDetail"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </div>
    </el-dialog>


<!--    翻新表单-->
    <el-dialog
      :visible.sync="fanxinDialogVisible"
      width="500px">
      <span slot="title" class="custom-dialog-title">记录机器翻新信息</span>
      <el-form ref="fanxinForm" :model="fanxinForm" :rules="rulesFanxin" label-width="100px">
        <el-form-item label="原SN码" prop="oldSnId">
          <el-input v-model="fanxinForm.oldSnId" disabled></el-input>
        </el-form-item>
        <el-form-item label="新SN码" prop="newSnId">
          <el-input v-model="fanxinForm.newSnId"></el-input>
        </el-form-item>
        <el-form-item label="维修记录" prop="maintainRecord">
          <el-input v-model="fanxinForm.maintainRecord"></el-input>
        </el-form-item>
        <el-form-item label="物料缺料记录" prop="shortageRecord">
          <el-input v-model="fanxinForm.shortageRecord"></el-input>
        </el-form-item>
        <el-form-item label="责任归属" prop="responsibility">
          <el-select v-model="fanxinForm.responsibility" placeholder="请选择责任归属">
            <el-option label="材料" :value="1"></el-option>
            <el-option label="物流" :value="2"></el-option>
            <el-option label="客责" :value="3"></el-option>
            <el-option label="制程" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实际故障" prop="brokedown">
          <el-input v-model="fanxinForm.brokedown"></el-input>
        </el-form-item>
        <el-form-item label="处理方式" prop="resolveMethod">
          <el-input v-model="fanxinForm.resolveMethod"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarkInformation">
          <el-input v-model="fanxinForm.remarkInformation"></el-input>
        </el-form-item>
        <el-form-item label="维修网点" prop="maintainPoint">
          <el-select v-model="fanxinForm.maintainPoint" placeholder="请选择维修网点">
            <el-option label="黄石工厂" :value="1"></el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fanxinDialogVisible = false">返回</el-button>
        <el-button type="primary" @click="submitFanxin">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
import {
  list,
  insert,
  update,
  shouhouFanxin,
  fanxinRuku
} from "@/api/Empment/shouhourecondition";
import {Message} from 'element-ui';

export default {
  name: "EpmShouhouRecondition",
  data() {
    return {
      tableData: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        snId: "",
        sendBackNumber: "",
      },

      // 修改数据表单
      updateDialogVisible: false,
      updateForm: {
        sendBackNumber: "",
        snId: "",
        materialNumber: "",
        brand: "",
        machineType: "",
        size: null,
        count: null,
        manuDate: null,
        attachStatus: "",
        partsDetail:""
      },


      // 显示详细数据表单
      detailsDialogVisible: false, // 控制详情弹窗的显示
      detailsForm: {
        sendBackNumber: "",
        snId: "",
        brand: "",
        machineType: "",
        materialNumber:"",
        size: null,
        count: null,
        attachStatus: "",
        partsDetail:"",
        manuDate: null,
        backDate: null
      },


      // 添加数据表单
      addDialogVisible: false, // 控制显示列表或添加表单
      addForm: {
        sendBackNumber: "",
        snId: "",
        materialNumber: "",
        brand: "",
        machineType: "",
        size: null,
        count: null,
        manuDate: null,
        attachStatus: "",
        partsDetail:""
      },


      // 翻新表单
      fanxinDialogVisible:false,
      fanxinForm: {
        oldSnId:"",
        newSnId:"",
        maintainRecord: "",
        shortageRecord:"",
        responsibility:null,
        brokedown: "",
        resolveMethod:"",
        maintainPoint:null,
        remarkInformation:""
      },






      // 表单验证规则
      rulesAdd: {
        snId: [
          {required: true, message: '机器SN码不能为空', trigger: 'blur'}
        ],
        sendBackNumber: [
          {required: true, message: '快递单号不能为空', trigger: 'blur'}
        ]
      },
      rulesUpdate: {
        snId: [
          {required: true, message: '机器SN码不能为空', trigger: 'blur'}
        ],
        sendBackNumber: [
          {required: true, message: '快递单号不能为空', trigger: 'blur'}
        ]
      },
      rulesFanxin: {
        newSnId: [
          {required: true, message: '新SN码不能为空', trigger: 'blur'}
        ]
      }
    };
  },

  methods: {
    // 加载数据
    getList() {
      this.fetchData();
    },
    fetchData() {
      this.loading = true;
      list(this.queryParams)
        .then(response => {
          this.tableData = response.rows;
          this.loading = false;
          this.total = response.total;
        })
        .catch(error => {
          console.error("加载数据时出现错误:", error);
          this.loading = false;
        });
    },


    // 显示详情数据
    showDetailsDialog(row){
      this.detailsForm = {
        ...row,
        manuDate: this.formatDate(row.manuDate), // 格式化生产日期
        backDate: this.formatDate(row.backDate)  // 格式化退回日期
      };// 将选中行的数据填充到 detailsForm
      this.detailsDialogVisible = true; // 打开详情弹窗
    },


    // 添加数据
    showAddForm(){
      this.addForm = {
        sendBackNumber: "",
        snId: "",
        materialNumber: "",
        brand: "",
        machineType: "",
        size: null,
        count: null,
        manuDate: null,
        attachStatus: "",
        partsDetail:""
      };
      this.addDialogVisible = true; // 显示添加弹窗
    },

    submitAdd() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          insert(this.addForm)
            .then(() => {
              Message.success('添加成功');
              this.addDialogVisible = false;
              this.fetchData(); // 重新加载数据
            })
            .catch(error => {
              Message.error('添加失败');
            });
        } else {
          // 验证失败
          Message.error('请填写必填项');
        }
      });
    },


    // 修改数据
    openUpdateDialog(row){
      this.updateForm = {...row};
      this.updateDialogVisible = true;
    },

    submitUpdate() {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          // 验证通过后提交数据
          update(this.updateForm)
            .then(() => {
              Message.success('信息修改成功');
              this.updateDialogVisible = false;
              this.fetchData(); // 重新加载数据
            })
            .catch(error => {
              console.error('修改时出现错误:', error);
              Message.error('修改失败');
            });
        } else {
          Message.error('请填写必填项');
        }
      });
    },


    // 显示翻新弹窗
    openFanxinDialog(row) {
      this.fanxinForm = {...row};
      this.fanxinDialogVisible = true;
    },

    submitFanxin() {
      this.$refs.fanxinForm.validate((valid) => {
        if (valid) {
          // 验证通过后提交数据
          shouhouFanxin(this.fanxinForm)
            .then(() => {
              Message.success('提交成功');
              this.fanxinDialogVisible = false;
              this.fetchData(); // 重新加载数据
            })
            .catch(error => {
              Message.error('发货失败:');
            }
        );
        } else {
          Message.error('请填写必填项');
        }
      });
    },


  // 入库
    openRukuBox(row) {
      if (row.machineCondition !== 5) {
        this.$message.error('请优先进行翻新操作');
        return;
      }

      this.$confirm('确定进行入库操作?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fanxinRuku(row)
          .then(() => {
            this.$message.success('操作成功');
            this.fetchData(); // 重新加载数据
          })
          .catch(error => {
            this.$message.error('操作失败');
          });
      }).catch(() => {
        this.$message.info('操作已取消');
      });
    },




    // 格式化时间
    formatDate(isoDate) {
      if (!isoDate) return ""; // 处理空日期
      const date = new Date(isoDate);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
  },

  mounted() {
    this.fetchData(); // 组件挂载后加载数据
  }

};
</script>

<style>
.custom-dialog-title {
  font-size: 18px; /* 加大字号 */
  font-weight: bold; /* 加粗字体 */
}

</style>
